<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        <input type="text" id="add">
    </p>
    <div id="box">
        <h1>正在进行 ( <span id="ingNum"></span> )</h1>
        <ul id="ing">

        </ul>
        <h1>已经完成 ( <span id="edNum"></span> )</h1>
        <ul id="ed">

        </ul>
    </div>
</body>

</html>
<script>
    // es6class创建对象
    class Todo {
        // constructor定义属性
        constructor(options) {
            // 获取元素
            this.add = document.querySelector(options.add)
            this.box = document.querySelector(options.box)
            this.ing = document.querySelector(options.ing)
            this.ed = document.querySelector(options.ed)
            this.ingNum = document.querySelector(options.ingNum)
            this.edNum = document.querySelector(options.edNum)
            this.list = JSON.parse(localStorage.getItem('list')) || []
            // console.log(this.list);
            // 调用方法
            // this.setData()
            this.addInp()
            this.show()
            this.del()
            this.change()
        }
        // 添加
        addInp() {
            // 给input设置事件监听
            this.add.addEventListener('keydown', (e) => {
                // 判断是否按下的是回车键
                // console.log(e)
                if (e.code == 'Enter') {
                    // 非空校验
                    if (this.add.value == '') {
                        return alert('内容不能为空')
                    }
                    //声明组合对象
                    let obj = { title: this.add.value, flag: false, edit: false }
                    this.list.push(obj)
                    this.setData()
                    this.add.value = ''
                    this.show()
                }
            })
        }
        // 本地储存
        setData() {
            localStorage.setItem('list', JSON.stringify(this.list))
        }
        // 渲染
        show() {
            let ingValue=''
            let edValue=''
            let ingCount=0
            let edCount=0
            //遍历数组
            this.list.forEach((item,index)=>{
                if(item.flag){
                    edValue += `
                        <li>
                            <input type="checkbox" checked data-key="${index}">
                            ${item.title}
                            <button data-key="${index}">删除</button>    
                        </li>
                    `
                    edCount++
                }else{
                    ingValue += `
                        <li>
                            <input type="checkbox" data-key="${index}">
                            ${item.title}
                            <button data-key="${index}">删除</button>    
                        </li>
                    `
                    ingCount++
                }
            })
            // 渲染数据到页面视图
            this.ing.innerHTML=ingValue
            this.ed.innerHTML=edValue
            this.ingNum.innerHTML=ingCount
            this.edNum.innerHTML=edCount
        }
        // 删除
        del() {
            // 监听box大盒子
            this.box.addEventListener('click',(e)=>{
                // console.log(e);
                //判断是否是button这个dom元素节点
                if(e.target.nodeName=='BUTTON'){
                    //confirm删除
                    if(confirm('确定要删除吗')){
                        //数组截取万能法
                        this.list.splice(e.target.dataset.key,1)
                        this.setData()
                        this.show()

                    }
                }
            })
        }
        //切换
        change() {
            // 监听box大盒子
            this.box.addEventListener('change',(e)=>{
                console.log(e);
                //判断是否是button这个dom元素节点
                if(e.target.nodeName=='INPUT'){
                        //声明变量存储事件对象里获取到的索引
                        let key = e.target.dataset.key
                        this.list[key].flag=!this.list[key].flag
                        this.setData()
                        this.show()

                   
                }
            })
        }
    }
    new Todo({
        add: '#add',
        box: '#box',
        ing: '#ing',
        ed: '#ed',
        ingNum: '#ingNum',
        edNum: '#edNum'
    })
</script>